<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a><cite>登记管理</cite></a>
    <a><cite>代理月结</cite></a>
  </div>
</div>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layadmin-search">
      <form class="layui-form" method="post" lay-filter="form_month_settle_search">
        <script type="text/html" template>
          <div class="layui-inline">
            <div class="layui-form-label">代理</div>
            <div class="layui-input-inline" style="width: 200px">
              <select name="agent_id">
                <option value="">全部</option>
              </select>
            </div>
          </div>
          <div class="layui-inline">
            <div class="layui-form-label">选择月份</div>
            <div class="layui-input-inline">
              <select name="month">
                <option value="">全部</option>
              </select>
            </div>
          </div>
          <div class="layui-inline layui-btn-group">
            <button type="submit" lay-submit class="layui-btn" lay-filter="submit_month_settle_search">
              <i class="layui-icon layui-icon-search"></i>查询
            </button>
            <button type="submit" lay-submit class="layui-btn layui-btn-warm"
                    lay-filter="reset_month_settle_search">
              <i class="layui-icon layui-icon-close"></i>重置
            </button>
          </div>
        </script>
      </form>
    </div>
    <div class="layui-card-body">
      <div id="table_month_settle"></div>
      <script type="text/html" id="tpl_agent">
        {{d.agent.name}}
      </script>
      <script type="text/html" id="tpl_month">
        {{d.year}}年{{d.month}}月
      </script>
      <script type="text/html" id="tpl_tool">
        <a class="layui-table-link" lay-event="detail">
          查看明细
        </a>
        <div class="ant-divider"></div>
        <a class="layui-table-link" target="_blank"
           href="admin/registry/settle_export?agent_id={{d.agent_id}}&year={{d.year}}&month={{d.month}}&token={{layui.admin.getAccessToken()}}">
          下载明细
        </a>
      </script>
    </div>
  </div>
</div>

<script>
  layui.use(['fox_table'], function () {
    let $ = layui.$
      , fox_table = layui.fox_table
      , admin = layui.admin
      , form = layui.form
      , view = layui.view

    let resourceUrl = 'admin/registry/settle_summary'

    //加载月份数据
    admin.get('admin/agents?limit=1000', function (res) {
      layui.each(res.data, function (index, agent) {
        let opt = new Option(agent.name, agent.id)
        if (agent.id == layui.router().search.agent_id) {
          opt.selected = true
        }
        $('select[name="agent_id"]').append(opt)
      })
      $('select[name="agent_id"]').val(layui.router().search.agent_id)
      form.render()
    })

    //加载月份数据
    admin.get('admin/registry/settle_months', function (res) {
      layui.each(res.data, function (key, value) {
        let opt = new Option(value, key)
        $('select[name="month"]').append(opt)
      })
      $('select[name="month"]').val(layui.router().search.month)
      form.render()
    })

    // 列表查询
    fox_table.render({
      id: 'table_month_settle'
      , url: resourceUrl
      , width: 900
      , cols: [[
        {title: '代理', templet: '#tpl_agent', minWidth: 200}
        , {title: '月份', templet: '#tpl_month', width: 200}
        , {title: '登记数量', field: 'count', width: 200}
        , {title: '操作', width: 200, align: 'left', fixed: 'right', toolbar: '#tpl_tool'}
      ]]
    });

    //监听操作栏
    fox_table.toolbar(function (obj) {
      let data = obj.data;
      if (obj.event === 'detail') {
        showUserRegistry({
          agent_id: data.agent_id,
          year: data.year,
          month: data.month
        })
      }
    });

    //搜索
    form.on('submit(submit_month_settle_search)', function (d) {
      fox_table.reload(d.field);
      return false;
    });
    //重置
    form.on('submit(reset_month_settle_search)', function (d) {
      $("input[name='keyword']").val('');
      $("select[name='month']").val('');
      form.render()
      fox_table.reload({});
      return false;
    });

    //显示用户的登记记录
    function showUserRegistry(data) {
      let minWidth = '900px';
      let minHeight = '730px';
      admin.popup({
        title: '代理登记列表'
        , area: [minWidth, minHeight]
        , id: 'popup_agent_registry'
        , success: function (layero, index) {
          view(this.id).render('registry/agent_registry', data).done(function () {
          })
        }
      })
    }
  })
</script>

